<!-- for selected datatype properties -->
<div ng-show="selected !== undefined && selected.type === 'datatypeProperty'">
  <p>
    <strong>Type:</strong> datatype property
  </p>

  <p ng-if="selected.props.length === 1">
    <strong>URI:</strong>
    <a href="{{selected.props[0].uri}}" target="_blank">
      {{selected.props[0].uri}}
      <span class="glyphicon glyphicon-new-window"></span>
    </a>
  </p>

  <p>
    <strong>From instances of:</strong>
    <a href="{{selected.sourceURI}}" target="_blank">
      {{selected.sourceName}}
      <span ng-hide="selected.sourceName.length > 0">{{selected.sourceURI | uriLabel}}</span>
      <span class="glyphicon glyphicon-new-window"></span>
    </a>
  </p>

  <p>
    <strong>To:</strong>
    <a href="{{selected.targetURI}}" target="_blank">
      {{selected.targetURI | uriLabel}}
      <span class="glyphicon glyphicon-new-window"></span>
    </a>
  </p>

  <p>
    <strong ng-if="selected.props.length > 1 && selected.props.length <= vm.numberOfProps">
      Properties ({{selected.props.length}}):
    </strong>
    <strong ng-if="selected.props.length > vm.numberOfProps">
      Properties ({{vm.numberOfProps}} of {{selected.props.length}}):
    </strong>
  </p>

  <div ng-if="selected.props.length > 1" class="prop-list" style="max-height: 80px;">

    <!-- if props are NOT ordered -->
    <ul class="properties" ng-if="!selected.ordered">
      <li ng-repeat="p in selected.props | limitTo: vm.numberOfProps">
        <a href="{{p.uri}}" target="_blank">
          {{p.uri | uriLabel}}
          <span class="glyphicon glyphicon-new-window"></span>
        </a>
      </li>
    </ul>

    <!-- if props are ordered -->
    <ol class="properties" ng-if="selected.ordered">
      <li ng-repeat="p in selected.props | limitTo: vm.numberOfProps">
        <a href="{{p.uri}}" target="_blank">
          {{p.uri | uriLabel}}
          <span class="glyphicon glyphicon-new-window"></span>
        </a>
        ({{p.value | number}})
      </li>
    </ol>

    <button ng-hide="selected.props.length <= vm.numberOfProps" type="button" class="btn btn-link"
            ng-click="vm.incNumberOfProps()">
      show more ...
    </button>
  </div>

</div>
